<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Topics</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="../vendors/font-awesome.min.css">
  <link rel="stylesheet" href="../styles.css">

</head>

<body class="spirit">

<div class="layout">
  <div class="layout__header">
    <a class="header__logo" href="#">Spirit</a>
  </div>

  <div class="layout__comments">
    <ul class="breadcrumb_nav">
      <li><a href="#" >Latest</a><i class="fa fa-chevron-right"></i></li>
      <li><a href="#" >General</a></li>
    </ul>
    <h1 class="headline">Topic title here</h1>
    <div class="comments_list">
      <div class="comments_list__comment">
        <div class="comment__img">
          <img class="comment__img__avatar" src="avatar.png" />
        </div>
        <div class="comment__info">
          <div class="comment__info__username">
            <a class="comment__info__username__link" href="#">nitely</a>
            <div class="comment__info__username__realname">Esteban Castro Borsani</div>
          </div>
          <ul class="comment__info__date">
            <li><a href="#"><i class="fa fa-pencil"></i> 3</a></li>
            <li>4h</li>
          </ul>
        </div>
        <div class="comment__text">
          <p>list</p>
          <ul>
            <li>list item</li>
            <li>list item</li>
          </ul>
          <p>list</p>
          <ol>
            <li>asd</li>
            <li>qwe</li>
          </ol>
        </div>
        <div class="comment__footer">
          <ul class="comment__actions">
            <li><a href="#"><i class="fa fa-flag"></i> report</a></li>
            <li class="comment__actions__share"><a href="#"><i class="fa fa-share"></i> share</a></li>
            <li class="comment__actions__like"><i class="fa fa-heart"></i> like</li>
            <li><a href="#">reply</a></li>
          </ul>

          <div class="comment__footer__share">
            <input class="comment__footer__share__url" type="text" value="http://url.com/comment" />
            <ul class="comment__footer__share__menu">
              <li><a href="#" target="_blank"><i class="fa fa-twitter"></i> Twitter</a></li>
              <li><a href="#" target="_blank"><i class="fa fa-facebook"></i> Facebook</a></li>
              <li><a href="#" ><i class="fa fa-envelope"></i> Email</a></li>
            </ul>
          </div>
        </div>
      </div>

      <div class="comments_list__comment">
        <div class="comment__img">
          <img class="comment__img__avatar" src="avatar.png" />
        </div>
        <div class="comment__info">
          <div class="comment__info__username">
            <a class="comment__info__username__link" href="#">nitely</a>
            <div class="comment__info__username__realname">Esteban Castro Borsani</div>
          </div>
          <ul class="comment__info__date">
            <li><a href="#"><i class="fa fa-pencil"></i> 3</a></li>
            <li>4h</li>
          </ul>
        </div>
        <div class="comment__text">
          <blockquote><blockquote><p>This site is for discussing spirit software in general.</p>
            <p>A little about Spirit:<br>
              Spirit was born in Argentina about a year ago. The development was extremely slow until recently, 75% was done in the last three months or so.<br>
              The design was inspired by Ghost and as you may see it has a bunch of features taken from other forum alternatives.</p>
            <p>I'm the main developer, and I hope that a lot of people will join me in this journey, maybe you are one of them .</p>
            <p>Some of the goals for this projects are:</p>
          </blockquote>
            <p>Tools to encourage conversation.<br>
              Easy integration to preexisting django proyects.<br>
              Clean interface.<br>
              Scalability.<br>
              Easy on resources.<br>
              Test it as much as possible, as you may notice it has over +250 unit tests right now.<br>
              Pythonic code, following the zen of python.</p>
            <p>The official repository can be found at: GitHub<br>
              Issues may be reported here or at the issues tracker</p>
          </blockquote>
          <p>foobar text</p>
        </div>
        <div class="comment__footer">
          <ul class="comment__actions">
            <li><a href="#"><i class="fa fa-flag"></i> report</a></li>
            <li class="comment__actions__share"><a href="#"><i class="fa fa-share"></i> share</a></li>
            <li class="comment__actions__like"><i class="fa fa-heart"></i> like</li>
            <li><a href="#">reply</a></li>
          </ul>
        </div>
      </div>

      <div class="comments_list__comment js-comment" id="c4" data-number="4" data-pk="1470">
        <div class="comment__img">
          <img class="comment__img__avatar" alt="image" src="avatar.png">
        </div>
        <div class="comment__info">
          <div class="comment__info__username">
            <a class="comment__info__username__link is-admin" href="/user/1/nitely/">nitely</a>
            <div class="comment__info__username__realname">Esteban Castro Borsani</div>
          </div>
          <ul class="comment__info__date js-move-comment-checkbox-list"><li title="Sept. 5, 2020, 12:09 p.m.">17m</li></ul>
        </div>
        <div class="comment__text">
          <p><img src="https://art.pixilart.com/4b680819d6447f3.gif" alt="nyan.cat.gif"></p>
          <p><span class="img_block"><img src="https://art.pixilart.com/4b680819d6447f3.gif" alt="nyan.cat.gif"></span></p>
          <p>start asd qwe asd qwe asd qwe <span class="img"><img src="https://art.pixilart.com/4b680819d6447f3.gif" alt="nyan.cat.gif"></span> asd qwe asd end</p>
          <p>asd <span class="img"><img src="avatar.png" alt="nyan.cat.gif"></span> qwe</p>
          <span class="video"><iframe src="https://www.youtube.com/embed/M9TYHOARDFI?html5=1" allowfullscreen=""></iframe></span>
          <p>asd qwe</p>
        </div>
        <div class="comment__footer js-tabs-container">
          <ul class="comment__actions"><li><a href="/comment/1470/delete/"><i class="fa fa-times"></i> delete</a></li><li><a href="/comment/flag/1470/create/"><i class="fa fa-flag"></i> report</a></li><li><a class="js-tab" href="#" data-related=".js-share-1470"><i class="fa fa-share"></i> share</a></li><li class="comment-like"><i class="fa fa-heart"></i> (0)</li><li><a href="/comment/1470/update/">edit</a></li></ul>
        </div>

      </div>

      <div class="comments_list__item">
        <div class="comments_list__item__badge">
          <i class="fa fa-lock"></i>
        </div>
        <div class="comments_list__item__info">
          <a class="comments_list__item__username__link" href="#"
          >nitely</a> closed this 1 year ago
        </div>
      </div>

      <div class="comments_list__item">
        <div class="comments_list__item__badge">
          <i class="fa fa-lock"></i>
        </div>
        <div class="comments_list__item__info">
          <a class="comments_list__item__username__link" href="#"
          >foobar</a> comment deleted 1 year ago
          <a href="#"><i class="fa fa-undo"></i> undelete</a>
          <a href="#">show <i class="fa fa-chevron-down"></i></a>
        </div>
        <div class="comments_list__item__comment" style="display: none;">
          <p>texto normal</p>
        </div>
      </div>

    </div>

    <div class="comments__footer_menu">
      <div class="comments__footer_menu__paginator">
        <ul class="paginator">
          <li class="paginator__pages">Page 1 of 3</li>
          <li class="paginator__button"><a href="#"><i class="fa fa-chevron-left"></i> First</a></li>
          <li class="paginator__button"><a href="#"><i class="fa fa-chevron-left"></i></a></li>
          <li class="paginator__button"><a href="#"><i class="fa fa-chevron-right"></i></a></li>
          <li class="paginator__button"><a href="#">Last <i class="fa fa-chevron-right"></i></a></li>
        </ul>
      </div>
      <div class="comments__footer_menu__notify">
        <a class="button" href="#">Notify me</a>
      </div>
    </div>

    <div class="comments__reply">
      <div class="comments__reply__img">
        <img class="comment__img__avatar" src="avatar.png" />
      </div>
      <div class="comment__reply__info">
        <a class="comment__reply__info__link" href="#">nitely</a>
        <div class="comment__reply__info__realname">Esteban Castro Borsani</div>
      </div>
      <div class="comment__reply__text">
        <form action=".">
          <input id="id_id" type="hidden" value="1" />
          <textarea id="id_comment" rows="2" placeholder="Write comment..."></textarea>
          <div class="comment__reply__preview js-box-preview-content" style="display:none;"></div>
          <div class="comment__reply__actions">
            <ul class="comment__reply__actions__list">
              <li><a class="js-box-bold" href="#" title="Bold"><i class="fa fa-bold"></i></a></li>
              <li><a class="js-box-italic" href="#" title="Italic"><i class="fa fa-italic"></i></a></li>
              <li><a class="js-box-list" href="#" title="List"><i class="fa fa-list"></i></a></li>
              <li><a class="js-box-url" href="#" title="URL"><i class="fa fa-link"></i></a></li>
              <li><a class="js-box-image" href="#" title="Image"><i class="fa fa-picture-o"></i></a></li>
              <li><a class="js-box-preview" href="#" title="Preview"><i class="fa fa-eye"></i></a></li>
            </ul>
            <input class="button comment__reply__actions__publish" type="submit" value="Publish" />
          </div>
        </form>
      </div>
    </div>

  </div>

  <div class="layout__footer">
    <a class="footer__logo" href="http://www.spirit-project.com" >Spirit</a>
  </div>
</div>

</body>

</html>
